<style lang="scss">
  @import "../../../../assets/css/variable";
  .img-box {
    width: 100%;
    overflow: auto;
  }

  .focus-popup {
    padding: $margin-normal;
    width: 100%;
    overflow: auto;
  }
</style>
<template>
  <div>
    <template v-for="item in list">
      <div @click="focus(item)" class="bg-color-white margin-top-normal padding-normal">
        <div class="color-primary-light">{{item.name}}</div>
        <div class="img-box">
          <img v-lazy="item.path" @click="popupVisible=true;selected=item"/>
        </div>
      </div>
    </template>
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade" class="focus-popup">
      <img class="margin-normal" v-lazy="selected.path"/>
    </mt-popup>
  </div>
</template>

<script type="text/babel">

  export default {
    props: ['list'],
    data(){
      return {
        selected: {},
        popupVisible: false
      }
    },
    computed: {},
    methods: {
      focus(fomula){

      }
    },
    components: {}
  };
</script>
